﻿<div role="tabpanel">
  <!-- 导入 -->
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span class="glyphicon glyphicon-import" aria-hidden="true">导入</span>
  </button>
  <!-- 页签导航 -->
  <ul class="nav nav-tabs " role="tablist">
    <li role="presentation" class="active">
      <a href="#userPanel" aria-controls="userPanel" role="tab" data-toggle="tab">列表</a>
    </li>
    <li role="presentation">
      <a href="#detailPanel" aria-controls="detailPanel" role="tab" data-toggle="tab">详情</a>
    </li>
    <li role="presentation">
      <a href="#addUserPanel" aria-controls="addUserPanel" role="tab" data-toggle="tab">新增</a>
    </li>
  </ul>

  <!-- 页签面板-->
  <div class="tab-content">
    <!-- 用户信息 -->
    <div role="tabpanel" class="tab-pane active" id="userPanel">
      <div class="panel panel-default">
        <div class="panel-body">
          <form class="form-inline">
            <div class="btn-group" role="group" aria-label="角色">
              <button type="button" class="btn btn-default">讲师</button>
              <button type="button" class="btn btn-default active">学员</button>
              <button type="button" class="btn btn-default">管理员</button>
            </div>
            &nbsp;&nbsp;
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search for...">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="button">搜索</button>
              </span>
            </div><!-- input-group -->
          </form>
          <table class="table table-striped">
            <thead>
              <tr>
                <th class="col-md-1">#</th>
                <th class="col-md-1">用户名</th>
                <th class="col-md-1">昵称</th>
                <th class="col-md-1">类型</th>
                <th class="col-md-1">积分</th>
                <th class="col-md-2">注册日期</th>
                <th class="col-md-1">锁定</th>
                <th class="col-md-2">角色</th>
                <th class="col-md-2">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>caocao</td>
                <td>曹操</td>
                <td>邮箱</td>
                <td>1000</td>
                <td>2015-07-03</td>
                <td>否</td>
                <td>管理员，讲师</td>
                <td>
                  <a href="" data-toggle="modal" data-target="#editUser"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                  <a href="" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                </td>
              </tr>
              <tr>
                <td>2</td>
                <td>caocao</td>
                <td>曹操</td>
                <td>邮箱</td>
                <td>1000</td>
                <td>2015-07-03</td>
                <td>否</td>
                <td>管理员，讲师</td>
                <td>
                  <a href="" data-toggle="modal" data-target="#editUser"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                  <a href="" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                </td>
              </tr>
              <tr>
                <td>3</td>
                <td>caocao</td>
                <td>曹操</td>
                <td>邮箱</td>
                <td>1000</td>
                <td>2015-07-03</td>
                <td>否</td>
                <td>管理员，讲师</td>
                <td>
                  <a href="" data-toggle="modal" data-target="#editUser"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                  <a href="" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                </td>
              </tr>
              <tr>
                <td>4</td>
                <td>caocao</td>
                <td>曹操</td>
                <td>邮箱</td>
                <td>1000</td>
                <td>2015-07-03</td>
                <td>否</td>
                <td>管理员，讲师</td>
                <td>
                  <a href="" data-toggle="modal" data-target="#editUser"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                  <a href="" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                </td>
              </tr>
              <tr>
                <td>5</td>
                <td>caocao</td>
                <td>曹操</td>
                <td>邮箱</td>
                <td>1000</td>
                <td>2015-07-03</td>
                <td>否</td>
                <td>管理员，讲师</td>
                <td>
                  <a href="" data-toggle="modal" data-target="#editUser"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                  <a href="" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!-- end -->
      <!-- 分页导航 -->
      <nav class="col-md-4 col-md-offset-4">
        <ul class="pagination">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li class="active"><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li>
            <a href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>

    <!-- 用户详情 -->
    <div role="tabpanel" class="tab-pane" id="detailPanel">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object img-circle" src="images/size.png" alt="头像">
              </a>
            </div>
            <div class="media-body">
              <h1 class="media-heading">caocao</h1>
              <br/>
              <p>账号类型：<span>邮箱</span></p>
              <p>昵称：<span>曹操</span></p>
              <p>性别：<span>男</span></p>
              <p>年龄：<span>23</span></p>
              <p>积分：<span>1000</span></p>
              <p>注册日期：<span>2015-07-03</span></p>
              <p>锁定：<span>否</span></p>
              <p>角色：<span>管理员，讲师</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增用户 -->
    <div role="tabpanel" class="tab-pane" id="addUserPanel">
      <div class="panel panel-default">
        <div class="panel-body">
          <form class="form-horizontal">
            <div class="form-group">
              <label class="col-md-2 control-label" for="inputEmail">用户名:</label>
              <div class="col-md-8">
                <input type="email" id="inputEmail" class="form-control">
              </div>
            </div>

            <div class="form-group">
              <label class="col-md-2 control-label" for="inputPassword">密码:</label>
              <div class="col-md-8">
                <input type="password" id="inputPassword" class="form-control">
              </div>
            </div>

            <div class="form-group">
              <label class="col-md-2 control-label" for="inputPassword2">确认密码:</label>
              <div class="col-md-8">
                <input type="password" id="inputPassword2" class="form-control">
              </div>
            </div>

            <div class="form-group">
              <label class="col-md-2 control-label" for="nickName">昵称:</label>
              <div class="col-md-8">
                <input type="text" id="nickName" class="form-control">
              </div>
            </div>

            <div class="form-group">
              <label class="col-md-2 control-label" for="age">年龄:</label>
              <div class="col-md-8">
                <input type="number" id="age" class="form-control">
              </div>
            </div>

            <div class="form-group">
              <label for="roleNames" class="col-md-2 control-label">角色:</label>
              <div class="col-md-8">
                <select id="roleNames" class="form-control">
                  <option></option>
                  <option>超级管理员</option>
                  <option>讲师</option>
                  <option>学员</option>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label class="col-md-2 control-label">性别:</label>
              <div class="col-md-8">
                <div class="radio">
                  <label>
                    <input name="user-type" type="radio" value="男" checked="checked">男
                  </label>
                  &nbsp;
                  <label>
                    <input name="user-type" type="radio" value="女">女
                  </label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="col-md-2 control-label" for="picture">头像:</label>
              <div class="col-md-8">
                <input type="file" name="addPicture" id="addHeadPicture">
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-8 col-md-offset-2">
                <button type="submit" class="btn btn-primary">确 认</button>
                <button type="reset" class="btn btn-primary">重 置</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- end -->
</div>
<!-- end content-->

<!-- 删除用户的Modal界面 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">
                    删除用户
        </h4>
      </div>
      <div class="modal-body">
                确认删除该记录？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">
                    确 认
        </button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">
                     取 消
        </button>
      </div>
    </div>
  </div>
</div>
<!-- 删除用户end -->

<!-- 修改教师的Modal界面 -->
<div class="modal fade" id="editUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header" align="center">
        <h4 class="modal-title" id="myModalLabel">
          <strong>编 辑 用 户</strong>
        </h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" action="" method="post">
          <div class="form-group">
            <label class="col-md-3 control-label" for="inputEmail">用户名:</label>
            <div class="col-md-8">
              <input type="email" id="inputEmail" class="form-control">
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-3 control-label" for="inputPassword">密码:</label>
            <div class="col-md-8">
              <input type="password" id="inputPassword" class="form-control">
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-3 control-label" for="inputPassword2">确认密码:</label>
            <div class="col-md-8">
              <input type="password" id="inputPassword2" class="form-control">
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-3 control-label" for="nickName">昵称:</label>
            <div class="col-md-8">
              <input type="text" id="nickName" class="form-control">
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-3 control-label" for="age">年龄:</label>
            <div class="col-md-8">
              <input type="number" id="age" class="form-control">
            </div>
          </div>

            <div class="form-group">
              <label for="courseCategory" class="col-md-3 control-label">角色:</label>
              <div class="col-md-8">
                <select id="courseCategory" class="form-control">
                  <option></option>
                  <option>超级管理员</option>
                  <option>讲师</option>
                  <option>学员</option>
                </select>
              </div>
            </div>

          <div class="form-group">
            <label class="col-md-3 control-label">性别:</label>
            <div class="col-md-8">
              <div class="radio">
                <label>
                  <input name="user-type" type="radio" value="0">男
                </label>
                &nbsp;
                <label>
                  <input name="user-type" type="radio" value="1">女
                </label>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-3 control-label" for="picture">头像:</label>
            <div class="col-md-8">
              <input type="file" id="picture">
            </div>
          </div>

          <div class="form-group">
            <div class="col-md-4 col-md-offset-8">
              <button type="submit" class="btn btn-primary">确 认</button>
              <button type="reset" class="btn btn-primary" data-dismiss="modal">取 消</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- 导入 -->
<div class="modal fade" id="editUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header" align="center">
        <h4 class="modal-title" id="myModalLabel">
          <strong>导入用户</strong>
        </h4>
      </div>
      <div class="modal-body">
          <div class="form-group">
            <label class="col-md-3 control-label" for="picture">导入:</label>
            <div class="col-md-8">
              <input type="file" id="import_user">
            </div>
          </div>
      </div>
    </div>
  </div>
</div>

<!-- end -->